<template>
<div class="experiment-list">
    <el-form class="e-i-top box-mid">
        <el-input placeholder="请输入内容" v-model="keyword">
            <i slot="suffix" class="el-input__icon el-icon-search" @click="search"></i>
        </el-input>
        <div>
            <el-button type="primary" @click="$router.push('/experiment/new')">新建</el-button>
            <el-button @click="handleRemove">删除</el-button>
        </div>
    </el-form>
    <div class="box-table">
        <el-table :data="tableData" tooltip-effect="dark" @selection-change="handleSelected">
            <el-table-column align="center" type="selection" width="55"></el-table-column>
            <el-table-column align="center" label="实验名称" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" :content="scope.row.experimentName" placement="bottom">
                        <el-button type="text" @click="$router.push('/experiment/editExp')">{{ scope.row.experimentName }}</el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="createOper" label="创建者" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="状态" show-overflow-tooltip>
                <template slot-scope="scope">{{ scope.row.status === 0 ? '正常' : '失效' }}</template>
            </el-table-column>
            <el-table-column align="center" prop="lastUpdateTime" label="更新时间" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="创建时间" show-overflow-tooltip>
                <template slot-scope="scope">{{ scope.row.createTime }}</template>
            </el-table-column>
        </el-table>
    </div>
    <div class="box-pagenation">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</div>
</template>

<script>
export default {
    name: 'ExpTable',
    data () {
        return {
            selected: [],
            keyword: '',
            total: 0,
            pageSize: 10,
            currentPage: 1,
            tableData: []
        }
    },
    created () {
        this.init()
    },
    methods: {
        search () {
            this.currentPage = 1
            this.init()
        },
        init () {
            const params = {
                projectId: this.$projectId,
                keyword: this.keyword,
                pageSize: this.pageSize,
                pageNum: this.currentPage
            }
            this.$post('experiment/query', params).then(res => {
                const { total, rows } = res
                this.total = total
                this.tableData = rows
            })
        },
        handleRemove () {
            if (this.selected.length > 0) {
                const params = this.selected.map(v => v.experimentId)
                this.$post('experiment/delete', params).then(res => {
                    if (res) {
                        this.$message.success('删除成功')
                        this.init()
                    }
                })
            } else {
                this.$message.error('请先选择操作对象')
            }
        },
        handleCurrentChange (val) {
            this.currentPage = val
            this.init()
        },
        handleSizeChange (val) {
            this.pageSize = val
            this.init()
        },
        handleSelected (val) {
            this.selected = val
        }
    }
}
</script>

<style lang="less">
.experiment-list {
    .e-i-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .el-icon-search {
        cursor: pointer;
    }
    .e-i-right {
        width: 30%;
        margin-left: 5px;
        background: #ffffff;
    }
}
</style>
